<template>
  <div class="plat-form">
    <div class="nav-container">
      <NavView />
    </div>
    <el-container>
      <!-- 左侧边栏 -->
      <el-aside width="200px">
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="side-menu" :default-active="activeMenu"
          text-color="#fff" @select="handleMenuSelect">
          <el-menu-item index="1">
            <el-icon>
              <document />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>内容管理</span>
            </template>
            <el-menu-item index="1-1">稿件管理</el-menu-item>
            <el-menu-item index="1-2">申述管理</el-menu-item>
            <el-menu-item index="1-3">字幕管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>内容管理</span>
            </template>
            <el-menu-item index="3-1">文章管理</el-menu-item>
            <el-menu-item index="3-2">视频管理</el-menu-item>
            <el-menu-item index="3-3">评论审核</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="4">
            <el-icon>
              <document />
            </el-icon>
            <span>数据中心</span>
          </el-menu-item>
          <el-menu-item index="5">
            <el-icon>
              <document />
            </el-icon>
            <span>粉丝管理</span>
          </el-menu-item>
          <el-sub-menu index="6">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>互动管理</span>
            </template>
            <el-menu-item index="6-1">文章管理</el-menu-item>
            <el-menu-item index="6-2">视频管理</el-menu-item>
            <el-menu-item index="6-3">评论审核</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="7">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>收益管理</span>
            </template>
            <el-menu-item index="7-1">文章管理</el-menu-item>
            <el-menu-item index="7-2">视频管理</el-menu-item>
            <el-menu-item index="7-3">评论审核</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="8">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>茁壮成长</span>
            </template>
            <el-menu-item index="8-1">任务成就</el-menu-item>
            <el-menu-item index="8-2">必火推广</el-menu-item>
            <el-menu-item index="8-3">创作学院</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="9">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>创作权益</span>
            </template>
            <el-menu-item index="9-1">文章管理</el-menu-item>
            <el-menu-item index="9-2">视频管理</el-menu-item>
            <el-menu-item index="9-3">评论审核</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="10">
            <el-icon>
              <document />
            </el-icon>
            <span>社区公约</span>
          </el-menu-item>
          <el-menu-item index="11">
            <el-icon>
              <document />
            </el-icon>
            <span>创作设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main>
        <div class="view-container">
          <!-- 动态组件加载区 -->
          <component :is="currentComponent" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import NavView from './components/NavView.vue'

// 导入各视图组件
import HomeView from './components/HomeView.vue'
import ContentManage from './components/ContentManage.vue'
import DataCenter from './components/DataCenter.vue'
import FansManage from './components/FansManage.vue'
import InteractionManage from './components/InteractionManage.vue'
import RevenueManage from './components/RevenueManage.vue'
import GrowthCenter from './components/GrowthCenter.vue'
import CreationRights from './components/CreationRights.vue'
import CommunityRules from './components/CommunityRules.vue'
import CreationSettings from './components/CreationRights.vue'

// 当前激活的菜单
const activeMenu = ref('1')
// 当前组件 (使用shallowRef优化性能)
const currentComponent = shallowRef(HomeView)

// 菜单与组件映射表
const menuComponents = {
  '1': HomeView,
  '1-1': ContentManage, // 稿件管理
  '1-2': ContentManage, // 申述管理
  '1-3': ContentManage, // 字幕管理
  '3-1': ContentManage, // 文章管理
  '3-2': ContentManage, // 视频管理
  '3-3': ContentManage, // 评论审核
  '4': DataCenter,
  '5': FansManage,
  '6-1': InteractionManage,
  '6-2': InteractionManage,
  '6-3': InteractionManage,
  '7-1': RevenueManage,
  '7-2': RevenueManage,
  '7-3': RevenueManage,
  '8-1': GrowthCenter,
  '8-2': GrowthCenter,
  '8-3': GrowthCenter,
  '9-1': CreationRights,
  '9-2': CreationRights,
  '9-3': CreationRights,
  '10': CommunityRules,
  '11': CreationSettings
}

// 菜单选择处理
const handleMenuSelect = (index) => {
  activeMenu.value = index
  currentComponent.value = menuComponents[index] || HomeView

  // 可以在这里添加页面跳转逻辑或数据加载
  console.log('切换到组件:', currentComponent.value.name)
}
</script>

<style scoped lang="scss">
/* 原有样式保持不变 */
.plat-form {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .el-container {
    height: 100%;

    .el-aside {

      color: var(--el-text-color-primary);

      .side-menu {
        height: 100%;
        border-right: none;
      }
    }

    .el-main {
      padding: 20px;
      background-color: #f0f2f5;

      .view-container {
        height: 100%;
      }
    }
  }
}
</style>
